<template>
  <div class="imap">
       <ul>
           <li><span>所在城市:</span><strong>{{this.autolocation}}</strong></li>
           <li><span>你好:</span><strong>{{this.name}}</strong><span @click="tuichu">退出</span></li>
           <li><span>我的订单</span><strong></strong></li>
           <li><span>我的消息</span><strong></strong></li>
           <li><span>我是商家</span><strong></strong></li>
           <li><span>联系电话</span><strong></strong></li>
       </ul>
  </div>
</template>
<script>
import AMap from 'AMap' // 引入高德地图
import axios from "axios";
export default {
    name: "imap",
     data() {
    return {
      autolocation: "北京",
      name:"",

    }
  },
  mounted() {
    if(localStorage.userid){
       var url = "http://localhost:3000";
        axios.post(url + "/login/userall",{id:localStorage.userid})
            .then(response => {
              this.name=response.data.userName;
            })
            .then(() => {
            });
    }else{
    this.getLocation();
    this.name='游客'
    }
  },
  methods: {
    //退出
    tuichu(){
        localStorage.clear();
         this.$router.push({name:'login'});
    },
    // 获取定位
    getLocation() {
      const _this = this;
      AMap.plugin('AMap.CitySearch', function () {
        var citySearch = new AMap.CitySearch()
        citySearch.getLocalCity(function (status, result) {
          if (status === 'complete' && result.info === 'OK') {
            // 查询成功，result即为当前所在城市信息
           window.console.log('通过ip获取当前城市：',result.city);
           _this.$emit('dw',result.city)
            _this.autolocation = result.city;
          }
        })
      });
    }
  }
}
</script>

<style>
  .imap{
    width: 100%;
    height: 20px;
    background: #ccc;
    font-size: 14px;
  }
  .imap ul li{
    width: 15%;
    float: left;
  }
</style>



